<template>
	<view class="header_com">
		<!-- 系统状态栏高度 -->
		<!-- <view class="statusBarHeight" :style="{ height: statusBarHeight + 'rpx' }"></view>	 -->
		<!-- 头部内容 -->
		<view class="header">
            <view class="header_item" @click="handleKh">
                <view>客户：</view>
                <view style="font-size: 15rpx;">{{khName? khName : '选择客户 >'}}</view>
            </view>

            <view class="header_item" style="flex: 1; margin-left: 40rpx;">
               <slot name="center">
                    <view class="header_item">
                        <view>欠款：</view>
                        <input v-model="qkje" disabled />
                    </view>
               </slot>
            </view>

            <view class="header_top_right">
                <slot name="right_btn"></slot>
            </view>
		</view>	


        <!-- 弹出框 -->
        <uni-popup ref="khPopup" :mask-click="false" type="bottom">
			<view class="kh_popup_content">
                <view >
                    <uni-segmented-control :current="current" :values="items" style-type="button"
                        active-color="#f9a94d" @clickItem="onClickItem" />
                </view>
                <view class="content">
                    <view class="search_content" v-if="current === 0">
                        <view class="kh_search">
                            <uni-easyinput placeholderStyle="font-size: 20rpx;" style="margin-bottom: 40rpx;" prefixIcon="search" type="text" v-model="kh" placeholder="请输入客户名字" @clear="handleClear"/>
                            <button hover-class="hover_confirm"  @click="search">搜索</button>
                        </view>

                        <view class="kh_content">
                            <scroll-view style="height: 300rpx; " scroll-y="true" @scrolltolower="onScrolltolower">
                                <view class="kh_item" v-for="(item, index) in khList" :key="index">
                                    <checkbox-group @click="selectKh(item)">
                                        <label class="title_flex">
                                            <checkbox :value="item.bh" :checked="item.checked" /> {{ item.name }}
                                        </label>
                                    </checkbox-group>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <!--  -->
                    <view class="add_kh" v-if="current === 1">
                        <view class="kh_item">
                            <view class="label">名字：</view>
                            <uni-easyinput placeholderStyle="font-size: 20rpx;" style="margin-bottom: 40rpx;" prefixIcon="search" type="text" v-model="khForm.name" placeholder="请输入名字" />
                        </view>
                        <view class="kh_item">
                            <view class="label">电话：</view>
                            <uni-easyinput placeholderStyle="font-size: 20rpx;" style="margin-bottom: 40rpx;" prefixIcon="phone" type="text" v-model="khForm.tel1" placeholder="请输入电话" />
                        </view>
                        <view class="kh_item">
                            <view class="label">地址：</view>
                            <!-- <input v-model="khForm.address" placeholder="请输入地址字" /> -->
                            <uni-easyinput placeholderStyle="font-size: 20rpx;" style="margin-bottom: 40rpx;" prefixIcon="location" type="text" v-model="khForm.area" placeholder="请输入地址字" />
                        </view>
                    </view>
                </view>

                <view class="kh_footer">
                    <button hover-class="hover_cancel" @click="handleCancel">取消</button>
                    <button hover-class="hover_confirm" @click="handleSave">确认</button>
                </view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
import Http from '@/service/api'
import utils from "@/utils/utils.js";
	export default {
        props: {
            khInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
		data() {
			return {
				statusBarHeight: 0,

                items: ['客户', '新增'],
				current: 0,
                kh: "",
                newKhList: [],
                khList: [],
                searchList: [],
                page: 1,
                showSearch: false,
                khForm: {}, // 新增客户表单
                qkje: 0, // 欠款金额
                khName: '',
			}
		},
		created() { // 子组件 onLoad 不生效
			this.statusBarHeight = this.$globalMap.statusBarHeight
            if (this.khInfo.bh) {
                this.khName = this.khInfo.name
            }
		},
		methods: {
            // 侧边栏获取基础数据
            GetBaseInfoList() {
                let param = { param: 'khid' }
                Http.GetBaseInfoList(param).then(r => {
                    let list = r.khid.map((i, j) => ({...i, checked: false}))
                    this.page = 1
                    this.khList = utils.paginateArray(list, 20, this.page)
                    this.newKhList = list
                   
                }).catch(err => {
                    console.log('== err ', err)
                })
            },
			handleKh() {
                this.$refs.khPopup.open('center')
                this.GetBaseInfoList()
                this.kh = ''
                this.khForm = {}
                this.current = 0
            },
            selectKh(item) {
                console.log('== 选中 kh ', item)
                console.log('== 选中 checked ', item.checked)
                this.khList = this.khList.map(i => ({...i, checked: item.bh == i.bh ? !item.checked : false}))
            },
            handleCancel() {
                this.$refs.khPopup.close()
            },

            // 滚动加载
            onScrolltolower() {
                this.page++
                console.log('== 11 page ', this.page)
                let arr = []

                if (this.kh && this.showSearch) {
                    arr = this.searchList 
                } else {
                    arr = this.newKhList
                }
                let list = utils.paginateArray(arr, 20, this.page)
                if (list.length == 0) {
                    this.page--
                }
                this.khList = this.khList.concat(list)
            },
            // 搜索
            search() {
                this.page = 1
                let list = this.newKhList.filter(i => i.name.includes(this.kh))
                this.searchList = list
                this.khList = utils.paginateArray(list, 20, this.page)
                this.showSearch = true
            },
            handleClear() {
                this.page = 1
                this.showSearch = false
                this.khList = []
                this.khList = utils.paginateArray(this.newKhList, 20, this.page)
            },

            onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

            // 保存
            handleSave() {
                if (this.current == 0) {
                    let item = this.khList.filter(i => i.checked)[0]
                    this.khName = item.name
                    let param = {
                        khbh: item.bh
                    }
                    Http.GetKhqkInfo(param).then(r => {
                        this.qkje = r.qkje ? r.qkje.toFixed(2) : ''
                        let param1 = {
                            ...item,
                            qkje: this.qkje
                        }
                        this.$emit('getKh', param1)
                        this.$refs.khPopup.close() // 关闭弹窗
                    }).catch( err => {
                        console.log('= err', err)
                    })

                } else {
                    

                    let param = {
                        uid: uni.getStorageSync('uid'),
                        main: {
                            ...this.khForm,
                        }
                    }
                    Http.SysCustoms(JSON.stringify(param)).then(r => {
                        this.$refs.khPopup.close()
                    }).catch( err => {
                        console.log('= err', err)
                    })
                }
            },
		}
	}
</script>

<style lang="less" scoped>
.header_com{
    width: 100%;
    box-sizing: border-box;
	.statusBarHeight {
		width: 100%;
		background: #fff;
	}

    .header {
        display: flex;
        align-items: center;

        .header_item {
            display: flex;
            align-items: center;
        }


        .header_top_right {
            .add_btn {
                display: flex;
                align-items: center;
                height: 45rpx;
            }

            .iconfont {
                font-size: 20rpx;
                margin-right: 5rpx
            }
        }
    }
	
}

// 客户弹出框
.kh_popup_content {
    width: 80vw;
    min-height: 300rpx;
    background: #fff;
    border-radius: 15rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;

        .search_content {
            display: flex;
            width: 100%;
            overflow: auto;
            flex-direction: column;
            overflow: auto;

            .kh_search {
                display: flex;
                align-self: center;
                margin-top: 20rpx;
                width: 100%;
                button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30%;
                    height: 50rpx;
                    background: #f9a94d;
                    color: #fff;
                    margin: 0;
                }

                .hover_confirm {
                    background: #e49a46;
                }

                .uni-easyinput {
                    margin-bottom: 0 !important;
                }
            }

            .kh_content {
                overflow: auto;

                .kh_item {
                   padding: 10rpx;
                   border-bottom: 1rpx solid #ccc;
                }
            }
        }
        
        

        /deep/.uni-easyinput__content-input {
            height: 50rpx;
        }

        /deep/.content-clear-icon {
            font-size: 25rpx !important;
        }
        /deep/.uni-input-input {
            font-size: 20rpx;
        }

        // 添加客户
        .add_kh {
            margin-top: 20rpx;
            .kh_item {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                .uni-easyinput {
                    margin-bottom: 0 !important;
                }

                .label {
                    white-space: nowrap;
                    font-size: 20rpx;
                }

                input {
                    flex: 1;
                }

            }
        }
    }

    .kh_footer {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 10rpx;

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30%;
            height: 40rpx;
            background: #f9a94d;
            color: #fff;
            margin: 0;
        }

        button:nth-child(1) {
            background: #fff;
            color: #000;
        }
        .hover_confirm {
            background: #e49a46;
        }

        .hover_cancel {
            background: #e7e7e7 !important;
        }
    }
}
</style>
